<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <base target="_self">

    <title>修改个人信息</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico"> 
    <link href="${pageContext.request.contextPath }/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <!-- jqgrid-->
    <link href="${pageContext.request.contextPath }/css/plugins/jqgrid/ui.jqgrid.css?0820" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/animate.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/style.css?v=4.1.0" rel="stylesheet">
    <script src="${pageContext.request.contextPath }/js/jquery.min.js?v=2.1.4"></script>
    <script src="${pageContext.request.contextPath }/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="${pageContext.request.contextPath }/js/ajaxfileupload.js" type="text/javascript"></script>
    
    <!-- 自定义js -->
    <script src="${pageContext.request.contextPath }/js/content.js?v=1.0.0"></script>
    <!-- jQuery Validation plugin javascript-->
    <script src="${pageContext.request.contextPath }/js/plugins/validate/jquery.validate.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/validate/messages_zh.min.js"></script>
    <script src="${pageContext.request.contextPath }/js/plugins/layer/layer.min.js"></script>
    
    
    <script type="text/javascript">
    
 	// 手机号码验证  
    jQuery.validator.addMethod("isMobile", function(value, element) {
        var length = value.length;
        var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
        return this.optional(element) || (length == 11 && mobile.test(value));
    }, "请正确填写您的手机号码");
    jQuery.validator.addMethod("isPassword", function(value, element) {
		var password = /^(?=.*[0-9].*)(?=.*[a-z].*).{8,15}$/;
		return this.optional(element) || (password.test(value));
	}, "密码必须包括数字、字母，且长度在8－15之间");

    $().ready(function () {
        var icon = "<i class='fa fa-times-circle'></i> ";
        $("#update_admin").validate({
            rules: {
            	realname: {//姓名
                    required: true,
    				maxlength: 20
                },
                telphone: {//电话
                    required: true,
                    isMobile:true,
                    remote: {
    					url: "${pageContext.request.contextPath }/admin/admin/isTelphone",
    					cache: false,
    				    data:{
    				    	telphone:function(){return $("#telphone").val();},
    				       id:function(){return $("#id").val();}
    				    },
                    },
    				minlength: 11
                }
            },
            messages: {
            	realname:{
            		required:icon + "请填写姓名",
            		maxlength:icon + "最大长度为20"
            	},
            	username: {
            		required:icon + "请输入登录帐号",
            		remote:icon + "登录帐号已存在",
            		maxlength:icon + "最大长度为20"
            		},
            	telphone:{
            		required:icon + "请填写电话",
            		isMobile:icon + "请输入正确格式",
            		remote:icon + "手机号已存在",
            		minlength:icon + "请输入11位"
            	}
            },
    		submitHandler: function(form) {
    			updateAdmin();
    		}
        });
    });
	//修改
	function updateAdmin(){	
		var pwd = $("#password").val();
		if(pwd != null && pwd != ""){
			if(pwd.length < 6 || pwd.length > 15){
				alert("密码长度为6－15位");
				$("#password").val("");
				$("#password").focus();
				return;
			}
		}
		$.ajax({
    		url:"${pageContext.request.contextPath }/admin/admin/updateAdmin",
    		data:$("#update_admin").serialize(),
    		type:"post",
    		success:function(data){
    			if(data.code == 0){
					layer.msg(data.message,{icon:1});
					setTimeout('cancel()',1000);
    			}else {
					layer.msg(data.message,{icon:0});
    			}
    		}
    	});
	}
  	//取消
    function cancel(){
   	 	var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
        parent.layer.close(index);
    }
    </script>
    
	<script>
	    $().ready(function(){
	    	//上传头像，触发click方法  
	    	$('#uploadBasicInfoHead').on('click',function(){  
	            $('#basicInfoHead').click();  
	           }); 
	    	//如果有头像则显示更换头像
	    	var imgHead=$("#imgHead").attr("src");
	    	//没有上传头像时src=“/项目名/”,所以要截取之后再判断
	    	imgHead=imgHead.substring(imgHead.indexOf("/",2)+1);
	    	if(imgHead!=null&&""!=imgHead){
	    		$("#uploadBasicInfoHead").text("更换头像");
	    	}
	    });
        
    function uploadHead(){
    	//校验是否选择图片
        var imgPath=$("#basicInfoHead").val();
        if(imgPath==null||imgPath==""){
        	layer.msg('请选择图片！',{icon:0});
        	return;
        }
        //校验图片格式是否正确
    	var strExtension = imgPath.substr(imgPath.lastIndexOf('.') +1);
        if (strExtension !='jpg'&& strExtension !='gif'&& strExtension !='png'&& strExtension !='bmp'&& strExtension !='jpeg') {
        	layer.msg('图片格式不正确，请重新选择!',{icon:0});
            return;
            }
        //校验图片大小是否超过5M
        var file = $("#basicInfoHead")[0];
        var imgSize  = file.files[0].size/1024;
        if(imgSize>5000){
        	layer.msg('上传图片不得超过5M,请重新选择',{icon:0});
        	return;
        }
        //异步发送上传头像请求
      $.ajaxFileUpload({  
          url:"${pageContext.request.contextPath}/admin/admin/profile/uploadBasicHead",//需要链接到服务器地址   
          secureuri:false,  
          fileElementId:"basicInfoHead",//文件选择框的id属性  
          dataType: 'json',   //json  
          success: function (data) {
             $("#imgHead").attr("src","${pageContext.request.contextPath }/"+data.imagePath);//图片预览
            $('#basicHeadUrl').val(data.imagePath); //图片路径用于表单提交 
          },
          error:function(XMLHttpRequest, textStatus, errorThrown){  
        	  layer.msg('上传失败，请重新上传!',{icon:0});  
       }  
      });  
    };  
	</script>
	
	<style>
		input,select{
			 width:168px;
			 height:25px;
			 border:1px solid #ccc;
			 margin-left:24px;
		}
		.label-text{
			width:80px;
			text-align:right;
		}
      #imgHead {
        width:90px;
        height:110px;
      }
      #uploadWord {
        width:170px;
        text-align:right;
        font-size:14px;
      }
	</style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content  animated fadeInRight">
        <div class="row">
            <div class="col-sm-6">
                <div class="social-feed-box">
                    <div class="social-footer">
						<form name = "form1" id = "update_admin">
							<c:choose>  
							   <c:when test="${empty a }">
							   		查询无此记录，请刷新后重试
							   </c:when>  
							   <c:otherwise>
									<input type = "hidden" id = "id" name = "id" value = "${a.id }"/>
									<div class="form-item">
										<label class="label-text">名称：</label>
										<input type = "text" name = "realname" class="addInput" value = "${a.realname }"  placeholder="输入姓名，不超过20字" maxlength="20" ><br/><br/>
									</div>
									<div class="form-item">
										<label class="label-text">登录帐号：</label> 
										<input type = "text" name = "username" class="addInput" id = "username" value = "${a.username }"  disabled="disabled"/><br/><br/>
									</div>
									<div class="form-item">
										<label class="label-text">登录密码：</label>
										<input type = "password" name = "password" class="addInput" id = "password"  placeholder="如为空，则不修改" /><br/><br/>
									</div>
									<div class="form-item">
										<label class="label-text">电话：</label>
										<input type = "text" name = "telphone" class="addInput" id = "telphone" value = "${a.telphone }" placeholder="输入手机号" maxlength="11"/><br/><br/>
									</div>
									<button type = "submit" class="btn btn-primary saveBtn">确定</button>
							   </c:otherwise>  
							</c:choose>  
					    </form>
                    </div>
                    
                    
                </div>
            </div>
        </div>
    </div>

</body>

</html>
